<template>
  <div>
    <my-breadcrumb :items="['消息管理', '举报']"/>
    <search :formItems="searchItems" @search="getList" ref="search"/>
    <el-table :data="reports" @sort-change="orderByTime">
      <el-table-column
        type="index"
        width="55">
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="举报内容"
        prop="content">
      </el-table-column>
      <el-table-column
        label="举报类型"
        prop="type">
        <template slot-scope="scope">
          {{ scope.row.type === '1' ? '用户' : (scope.row.type === '2' ? '资讯' : (scope.row.type === '3' ? '闲置' : (scope.row.type === '4' ? '评论' : (scope.row.type === '5' ? '留言板' : (scope.row.type === '6' ? '帖子' : 'repo'))))) }}
        </template>
      </el-table-column>
      <el-table-column
        label="举报时间"
        sortable="custom"
        prop="createtime">
      </el-table-column>
      <el-table-column
        label="举报人"
        prop="membername">
      </el-table-column>
      <el-table-column
        label="被举报人"
        prop="bmembername">
      </el-table-column>
      <el-table-column
        label="处理状态"
        prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === '0' ? '未处理' : (scope.row.status === '1' ? '已处理' : '已忽略') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180px"
        prop="id">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toShow(scope.row)" v-if="scope.row.type !== '1'">查看内容</el-button>
          <el-dropdown @command="slotFn">
            <el-button type="text">被举报用户</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'disable-' + scope.row.bmemberid">禁用</el-dropdown-item>
              <el-dropdown-item :command="'banned-' + scope.row.bmemberid">禁言</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown @command="slotFn" v-if="scope.row.status === '0'">
            <el-button type="text">处理</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'todo-' + scope.row.id + '-1'">已处理</el-dropdown-item>
              <el-dropdown-item :command="'todo-' + scope.row.id + '-2'">忽略</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <el-dialog title="举报内容详情" :visible.sync="showContent">
      <el-form>
        <el-form-item v-for="(item, index) in content" :key="index" :label="item.label">
          <template v-if="item.value instanceof Array">
            <img v-for="(img, i) in item.value" :key="i" :src="img" @click="imageClick(img)" alt="" width="100px" style="margin-right: 10px;">
          </template>
          <span v-else>{{ item.value }}</span>
        </el-form-item>
        <el-button type="danger" @click="toDelete" v-show="hasDel">删除举报内容</el-button>
      </el-form>
    </el-dialog>
    <el-dialog title="禁言用户" :visible.sync="showBanned" width="500px">
      <el-form :model="banned" ref="banned" label-width="70px">
        <el-form-item label="禁言时间" prop="times">
          <el-date-picker
            v-model="banned.times"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="禁言原因" prop="content">
          <el-input v-model="banned.content" type="textarea"/>
        </el-form-item>
      </el-form>
      <div class="footer" slot="footer">
        <el-button type="primary" @click="toSubmit">提交</el-button>
        <el-button type="danger" @click="showBanned = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看大图" :visible.sync="showImage">
      <img :src="nowImage" alt="" width="400px">
    </el-dialog>
  </div>
</template>

<script>
import {deletePrompt} from '../../utils/getList'
export default {
  name: 'report',
  data () {
    return {
      searchItems: [
        {
          label: '举报人',
          type: 'input',
          key: 'membername'
        },
        {
          label: '被举报人',
          type: 'input',
          key: 'bmembername'
        },
        {
          label: '举报内容',
          type: 'select',
          key: 'content',
          options: [
            {id: '广告内容', name: '广告内容'},
            {id: '不友善/引战内容', name: '不友善/引战内容'},
            {id: '违法违规内容', name: '违法违规内容'},
            {id: '虚假资讯/信息', name: '虚假资讯/信息'},
            {id: '冒充他人', name: '冒充他人'},
            {id: '其他', name: '其他'}
          ]
        }
      ], // 检索结构
      reports: [],
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      lifting: '1',
      showContent: false,
      content: [],
      contentId: '',
      nowType: '',
      keys: [
        {key: 'id', label: 'ID'},
        {key: 'content', label: '内容'},
        {key: 'imgarr', label: '图片'},
        {key: 'tbtoken', label: '淘口令'},
        {key: 'title', label: '标题'}
      ],
      hasDel: false,
      delUrls: ['', '', '/placard/delete', '/Used/delete', '/Comment/delcomment', '/Config/delete', '/article/delete', '/repo/delete'],
      urls: ['', '', '/Placard/detail', '/Used/detail', '/Comment/detail', '/Config/detail', '/article/detail', '/repo/detail'],
      banned: {
        times: [],
        content: ''
      },
      showBanned: false,
      bannedId: '',
      memberid: '',
      nowImage: '',
      showImage: false
    }
  },
  methods: {
    getList () {
      let searchData = {}
      if (this.$refs['search']) {
        searchData = this.$refs['search'].search()
      }
      let params = {...searchData, page: this.page.pageNum, size: this.page.pageSize, orderby: this.lifting}
      this.axios.get('/Report/index', {params})
        .then(res => {
          if (res.data.status) {
            this.page.total = Number(res.data.data.count)
            this.reports = res.data.data.list
          }
        })
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNum = e
      this.getList()
    },

    toDelete () {
      deletePrompt({url: this.delUrls[this.nowType], id: this.contentId, memberId: this.memberid}, res => {
        if (res.data.status === 1) {
          this.$message.success(res.data.msg)
          this.getList()
          this.showContent = false
        }
      })
    },

    orderByTime (lifting) {
      if (lifting.order === 'ascending') {
        this.lifting = '2'
      } else {
        this.lifting = '1'
      }
      this.getList()
    },

    toShow (row) {
      let url = this.urls[row.type]
      this.contentId = row.bid
      this.nowType = row.type
      this.axios.get(url, {params: {id: row.bid}})
        .then(res => {
          this.content = []
          if (res.data.data) {
            this.memberid = res.data.data.memberid
            this.hasDel = true
            this.keys.forEach(item => {
              if (res.data.data[item.key]) {
                this.content.push({value: res.data.data[item.key], label: item.label})
              }
            })
          } else {
            this.hasDel = false
            this.content.push({value: '举报内容已被删除', label: '已删除'})
          }
          this.showContent = true
        })
    },

    slotFn (command) {
      let arr = command.split('-')
      if (arr[0] === 'disable') {
        this.toDisable(arr[1])
      } else if (arr[0] === 'banned') {
        this.toBanned(arr[1])
      } else if (arr[0] === 'todo') {
        this.todo(arr[1], arr[2])
      }
    },
    todo (id, type) {
      let msg = '确定将该举报标记为已处理吗？'
      if (type === '2') {
        msg = '确定忽略该举报吗？'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('/Report/edit', this.qs.stringify({id, status: type}))
          .then(res => {
            if (res.data.status === 1) {
              this.getList()
              this.$message.success(res.data.msg)
            } else {
              this.$message.warning(res.data.msg)
            }
          })
      })
    },
    toDisable (id) {
      this.$confirm('此操作将禁用该账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/Member/nologin', {params: {memberid: id}})
          .then(res => {
            if (res.data.status === 1) {
              this.getList()
              this.$message.success(res.data.msg)
            }
          })
      })
    },
    // 禁言
    toBanned (id) {
      this.bannedId = id
      this.showBanned = true
      this.$nextTick(() => {
        this.$refs['banned'].resetFields()
      })
    },
    toSubmit () {
      let params = {
        memberid: this.bannedId,
        start: this.banned.times[0],
        end: this.banned.times[1],
        content: this.banned.content
      }
      this.axios.post('/Member/prohibit', this.qs.stringify(params))
        .then(res => {
          if (res.data.status === 1) {
            this.showBanned = false
            this.$message.success(res.data.msg)
            // this.getList()
          }
        })
    },

    imageClick (src) {
      this.nowImage = src
      this.showImage = true
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
